<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoList--最简单的待办事项列表</title>
    <script src="../Vue.js"></script>
</head>
<body>
<div id="app">
    ToDo
    <input type="text" id="text" v-model="task" placeholder="请输入要办的事项" >
    <button @click="handelClick">提交</button>
  <ul>
    <child
      v-for="(item , index) of list"
      :key="index"
      :item="item"
      :index="index"
      :bos="bos"
      :Text="Text"
      @delete="handelete"


    >

    </child>
  </ul>

  <div id="child">
<!--    <section>-->
<!--      <div>-->
<!--        <input type="radio">-->
<!--        <span id="todocount" v-for="mess in Text">-->
<!--          正在进行：{{mess}}-->
<!--        </span>-->
<!--        <input type="radio">-->
<!--      </div>-->
<!--      <div>-->
<!--        <input type="radio">-->
<!--        <span id="overcount">已经完成：{{mess}}</span><input type="radio">-->
<!--      </div>-->
<!--    </section>-->
    <footer id="footer">Copyright @ 2019 heibaike </footer>
  </div>

</div>
<script>

  Vue.component('child',{
    props:['item','index'],
    template:'<div>' +
      '<span v-show="over">待完成：</span>' +
      '<span v-show="noOver">已完成：</span>' +
      '<li @click="handClick">{{item}}</li>' +
      '<button @click="handleover">切换任务状态</button></div>',
    data:function(){
        return{
          over : true,
          noOver : false
      }
    },
    methods:{
      handClick:function(){
        this.$emit('delete',this.index)
      },

      handleover:function () {
        this.over = !this.over;
        this.noOver = !this.noOver
      }
    }
  });

  new Vue({
    el:"#app",
    data:{
      task:'',
      list:[],
    },
    methods:{
      handelClick : function(){
        this.list.push(this.task);
        this.task=''
      },
      handelete : function (index) {
        this.list.splice(index , 1)
      },


    }
  });
  var father = Vue.component('father',{
    computed:{
      Text:function(){
      task=this.task;
        if (task) {
          return task;
        }
      }
    },
  })
</script>
</body>
</html>

